<template>
  <view class="cart-box">
    <jianbianVue></jianbianVue>
    <view class="back-l">
      <u-icon name="arrow-left" size="60rpx" @click="backk"></u-icon><text style="font-size: 40rpx;">购物车</text>
    </view>
    <view class="cone-box">
      <view class="inh">
        <view style="background-color: white; height: 60rpx; line-height: 60rpx; border-radius: 5px;">
          <text style="padding-left: 10px; padding-right: 110px;">最快<text
              style="color: #4dbd7f; font-weight: bolder;">30</text>分钟送达</text>
          <text><text style="color: #eeb88e; font-weight: bolder;">3</text>张可用优惠券 </text>
        </view>
        <view style="background-color: white; height: 60rpx; line-height: 60rpx; border-radius: 5px; margin-top: 10px;">
          <text style="padding-left: 10px; padding-right: 90px;">再买39.9可享 满29.9减10</text>
          <text style="font-weight: bolder;">去凑单 ></text>
        </view>
      </view>
      <!-- 1 -->
      <view class="zhi" v-for="(item, index) in list1" :key="index" style="background-color: white;">
        <!-- <u-radio-group v-model="value" @change="radioGroupChange">
          <u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
            {{item.name}}
          </u-radio>
        </u-radio-group> -->
        <view class="jshw-box" v-for="(item,index) in hawu" :key="index" style="margin: 10px 0px;">
          <view class="zhi" v-for="(item, index) in list2" :key="index" style="background-color: white;">
            <u-radio-group v-model="value" @change="radioGroupChange">
              <u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
                {{item.name}}
              </u-radio>
            </u-radio-group>
            <!-- <view class="jshw-box" v-for="(item,index) in hawu" :key="index" style="margin: 20px 0px;">
              <carttVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
                :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
                :title9="item.title9" :title8="item.title8">
              </carttVue>
            </view> -->
          </view>
          <carttVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
            :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
            :title9="item.title9" :title8="item.title8":num="item.num">
          </carttVue>
        </view>
        
      </view>
      <!-- 2 -->
      <view class="like" style="text-align: center;width: 100%;margin: 30rpx 0rpx; font-weight: bolder;">
        猜你喜欢
      </view>
      <view class="jshww">
        <view class="jshww-box" v-for="(item,index) in hawew" :key="index">
          <contbox :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
            :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
            :title9="item.title9" :title8="item.title8">
          </contbox>
        </view>
      </view>
      <view class="bottu">
        <label class="radio">
          <radio value="qu" style="" /><text style="font-size: 35rpx;">全选</text>
        </label>
        <view class="ra-right">
          <text style="color: #b6b6b6;">配送费￥0</text><text style="font-weight: bolder;">合计</text><text
            style="font-weight: bolder;color: #f1a570;">￥</text><text
            style="font-weight: bolder;font-size: 35rpx; color: #f1a570;">17</text>
        </view>
        <button class="buyt">去结算</button>
      </view>
    </view>
  </view>
</template>

<script>
  import jianbianVue from '../../compoents/jianbian/jianbian.vue'
  import carttVue from '../../compoents/cartt/cartt.vue'
  import contbox from '../../compoents/contbox.vue'
  export default {
    components: {
      jianbianVue,
      carttVue,
      contbox
    },
    data() {
      return {
        hawew: [{
            imageurl: require('../../static/西红柿.png'),
            title1: '云南高山大西红柿',
            title2: "鲜嫩多汁",
            title3: "软甜爽口",
            title4: "入口美味",
            title5: "美味多汁",
            title6: "2.44",
            title7: "斤",
            title9: "券",
            title8: "减10元",
          },
          {
            imageurl: require('../../static/土豆.png'),
            title1: '宁夏西吉县马铃薯',
            title2: "基地直供",
            title3: "绿色培植",
            title4: "新鲜采摘",
            title5: "绿色新鲜",
            title6: "3.21",
            title7: "斤",
            title9: "券",
            title8: "减10元",
          }
        ],
        hawu: [{
          imageurl: require('../../static/包子.png'),
          title1: '江苏无锡香菇猪肉包',
          title2: "猪肉肥美",
          title3: "鲜甜嫩软",
          title4: "多汁美味",
          title5: "多汁香嫩",
          title6: "8.79",
          title7: "笼",
          title9: "券",
          title8: "减10元",
          num:0,
          disabled: false
        }, 
        {
          imageurl: require('../../static/西兰花.png'),
          title1: '浙江临海西兰花',
          title2: "基地直供",
          title3: "绿色培植",
          title4: "新鲜采摘",
          title5: "绿色新鲜",
          title6: "4.79",
          title7: "斤",
          title9: "券",
          title8: "减10元",
          num:0,
          disabled: false
        },],
        list1: [{
          name: '生鲜多人供应商直发',
          disabled: false
        }, ],
        list2: [{
          name: '生鲜多人供应商直发',
          disabled: false
        }, ],
        value: 'orange',
        background: {
          backgroundImage: 'linear-gradient(to bottom, #d2f2e1)'
        }
      }
    },
    methods: {
        backk() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      radioChange(e) {
        // console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      }
    }
  }
</script>

<style lang="scss">
  .cart-box {
    width: 100%;
    background-color: rgba(132, 132, 132, 0.1);
    position: relative;
    overflow: hidden;

    .back-l {
      position: absolute;
      top: 40px;
      left: 10px;
    }

    .cone-box {
      width: 90%;
      margin: auto;
      margin-top: -80px;
      // position: absolute;
      // top: 80px;
      // left: 20px;

      .inh {
        width: 100%;
        height: 90rpx;
        margin-bottom: 90rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .jshww {
        width: 100%;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .jshww-box {
          margin-bottom: 25rpx;
          width: 48%;
          border-radius: 10%;
        }
      }

      .bottu {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        border: 1px solid white;
        background-color: white;
        display: flex;
        justify-content: space-around;

        .ra-right {
          height: 50rpx;
          line-height: 50rpx;
          margin-left: 30px;
          margin-top: 15rpx;
        }

        .buyt {
          margin-right: 10px;
          width: 150rpx;
          height: 50rpx;
          text-align: center;
          margin-top: 15rpx;
          line-height: 50rpx;
          background-color: #49c07e;
          color: white;
          font-size: 25rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
</style>